<template>
  <div>
    <div id="logBarMain" ref="chartLogBar" style="width:100%; height:300px;margin-top:10px;"></div>
  </div>
</template>

<script>
import resize from '@/pages/Home/components/mixins/resize'
export default {
  mixins: [resize],
  name: 'LogBar',
  data () {
    return {
      chart: null
    }
  },
  props: {
    echartsData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    echartsData: {
      handler (newValue, oldValue) {
        this.$nextTick(() => {
          this.initChart(newValue)
        })
      },
      deep: true // 深度监听
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart(this.echartsData)
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    option (val) {
      var serverData = []
      var nameList = []
      Object.keys(val).forEach(function (key) {
        if (key !== 'mode_list') {
          nameList.push(key)
          serverData.push({
            name: key,
            type: 'bar',
            barGap: 0,
            emphasis: {
              focus: 'series'
            },
            data: val[key]
          })
        }
      })

      var data = {
        color: ['#ee6666', '#fac858', '#5ab1ef', '#009966', '#d87a80',
          '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
          '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
          '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: nameList
        },
        toolbox: {
          show: true,
          right: 30,
          orient: 'vertical',
          feature: {
            // mark: { show: true },
            // dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            // restore: { show: true },
            saveAsImage: {
              title: this.$t('保存为图片')
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: val.mode_list
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: serverData
      }
      return data
    },
    initChart (val) {
      this.chart = this.$echarts.init(document.getElementById('logBarMain'))
      this.chart.setOption(this.option(val), true)
    },
    exportImage () {
      let dataURL = ''
      var img = new Image()
      img.src = this.chart.getDataURL({
        type: 'png',
        pixelRatio: 1,
        backgroundColor: '#fff'
      })
      return new Promise(function (resolve, reject) {
        img.onload = function () {
          var canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          var ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0)
          dataURL = canvas.toDataURL('image/png')
          resolve(dataURL)
        }
      })
    }
  }
}
</script>
